<template>
  <div class="about">
    <h1>{{ title }}</h1>
    <h1>{{ content }}</h1>
    <h1>{{storeData.storeNumber}}</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
  </div>
</template>

<script>
import store from "@/store";

export default {

  beforeRouteEnter(to, from, next) {
    console.log('组件前置守卫==>' + this);
    next(vm => {
      console.log('前置守卫只能再next回调中获取this==>' + vm);
      console.log(vm);
      vm.title = to.meta;
      alert("正在查询, 请稍后")
      setTimeout(function () {
        vm.content = '经过交互传来的数据';
      }, 1000);
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件后置守卫==>' + this);
    console.log(this);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件复用守卫==>' + this);
  },
  data: function () {
    return {
      'title': '默认',
      'content': '',
      'storeData' : store,
    }
  }
}
</script>
